import merge from 'lodash/merge'
import { defaultNumber } from '@/utils';

/* eslint operator-linebreak: off */
export default {
  data() {
    const vm = this;
    return {
      chartOptionToolbox: {
        right: 10,
        feature: {
          // saveAsImage: {},
          magicType: {
            type: ['line', 'bar', 'stack'],
            option: {
              line: {
                smooth: true
              }
            }
          },
          dataView: {
            readOnly: true,
            optionToContent: vm.optionToContent || function (opt) {
              // console.log(opt);
              const axisData = opt.xAxis[0].data || [];
              const series = opt.series;
              const data = [
                [vm.dataViewFirstCellName || '', ...series.map(v => v.name)],
                ...axisData.map((v, i) => [v, ...series.map(s => defaultNumber(s.data[i]))])
              ];
              // console.log(data);
              return vm.generateTable(data)
            }
          },
        }
      }
    }
  },
  methods: {
    generateTable (data = []) {
      const theadData = data[0] || [];
      const tbodyData = data.slice(1) || [];
      let table = '<table class="chart-internal-table">';
      let thead = '<thead class="chart-internal-table-thead">';
      for (const item of theadData) {
        thead += `<th>${item}</th>`;
      }
      thead += '</thead>';

      let tbody = '<tbody class="chart-internal-table-tbody">';
      for (const row of tbodyData) {
        tbody += `<tr>${row.map(item => `<td>${item}</td>`).join('')}</tr>`;
      }
      tbody += '</tbody>';
      table += thead + tbody + '</table>';
      return table;
    },
    getChartOptionToolbox(option = {}) {
      return merge({}, this.chartOptionToolbox, option)
    }
  },
}
